<template>
  <div class="newWindow">
    <div class="conten">
      <h4 class="title">{{ $t('licence.est_title') }}</h4>
      <div class="flexBetween">
        <el-button type="primary" @click="router.push({ path: 'powerStation' })">{{$t('licence.est_powerStation')}}</el-button>
        <div>
          <el-input style="width: 240px; margin: 0 10px" v-model="searchValue" :placeholder="$t('licence.powerName')" clearable></el-input>
          <el-button type="primary" @click="onSubmit">{{ $t('licence.fau_Thequery') }}</el-button>
        </div>
      </div>
      <!-- 电站列表 -->
      <el-table v-if="queryData.total" :data="innerList" style="width: 100%; margin-top: 24px">
        <el-table-column prop="stationName" :label="$t('licence.stationName')" align="center" width="260" >
        </el-table-column>
        <el-table-column align="center" prop="userName" :label="$t('licence.est_creator')" width="150">
        </el-table-column>
        <el-table-column prop="createTime" :label="$t('licence.est_createTime')" width="180" align="center">
          <template #default="scope">
            {{ format.FormatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column  align="center" prop="address" :show-overflow-tooltip="true" :label="$t('licence.est_address')">
        </el-table-column>
        <el-table-column  align="center" :label="$t('licence.fau_operation')" width="220">
          <template #default="scope">
            <el-button v-if="scope.row.stationType == 3" @click="router.push({ path: 'equipmentList', query: { id: scope.row.id } })" type="text" size="small" >{{ $t('licence.fau_gateway') }}</el-button >
            <el-button v-else @click="router.push({ path: 'gatewayList', query: { id: scope.row.id } })" type="text" size="small" >{{ $t('licence.fau_gateway') }}</el-button >
            <el-button @click="router.push({ path: 'powerStation', query: { id: scope.row.id } })" type="text" size="small">{{ $t('licence.edit') }}</el-button >
            <el-button @click="delPowerStation(scope.row)" type="text" size="small" style="color: #ff2d2d" >{{ $t('licence.del') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-empty v-else  />
      <!-- 分页区 -->
      <div class="block" style="margin: 20px">
        <!-- 需要分页的时候要有三个 queryData.page页码  queryData.pagesize每页有几条数据  queryData.total 一共有多少个
        前两个是前端给后端  说我要第几页  多少个数据   后端要告诉总数  handleSizeChange 这个是数据条数发生变化时-->
        <el-pagination :hide-on-single-page="true" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryData.page" :page-size="queryData.pagesize" :page-sizes="[2, 4, 6, 8, 10]" layout="sizes, prev, pager, next,total, jumper" :total="queryData.total"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup name="EstablishDianzhan" lang="ts">
    import format from '@/utils/format'
    import { getInnerLists, delPowerStations } from "@/api/powerStation/powerStation";
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    import useSettingsStore from '@/store/modules/settings'
    import { useI18n } from 'vue-i18n'
    const { t } = useI18n()
    const settingStore = useSettingsStore();
    const router = useRouter();
    // 电站信息
    // 电站列表
    const innerList = ref([]);
    // 分页
    const queryData = reactive({
      page: 1,
      pagesize: 10,
      total: 0 as number
    });
    const searchValue = ref('')
    onMounted(()=> {

      console.log('aaaaaaaaaa:', )
      // 存到本地存储 header电站名和导航 显示与隐藏
      settingStore.setHeaderSum(5);
      // 电站列表
      getInnerList();
    });
    // 获取在建电站列表
    const getInnerList = async()=> {
      // 你给后端页码和数据条数
      let query = {
        pageNum: queryData.page,
        pageSize: queryData.pagesize,
        searchValue:searchValue.value
      };
      let res = await getInnerLists(query);
      // 分页总数据 后端给你总数据  total
      queryData.total = res.total;
      innerList.value = res.rows;
    };
    // 查询功能
    const onSubmit = () => {
      // console.log("submit!");
      getInnerList();
    }
    // 删除电站
    const delPowerStation = async(item:any)=> {
      ElMessageBox.confirm(
        t("licence.SubmitDelPowerStation"),
        t("licence.Tips"),
        {
          confirmButtonText: t("licence.del"),
          cancelButtonText: t("licence.cancel"),
          type: "warning",
        }
      )
        .then(async () => {
          await delPowerStations(item.id);
          if (innerList.value.length === 1 && queryData.page > 1) {
            queryData.page = queryData.page - 1;
          }
          getInnerList();
          proxy?.$modal.msgSuccess(t("licence.success"));
        })
        .catch(() => {
          proxy?.$modal.msg(t("licence.cancels"));
          getInnerList();
        });
    };

    // 分页
    const handleSizeChange = (val:number) => {
      // val就可以拿到当前数据条数 queryData.pagesize修改  然后获取数据
      queryData.pagesize = val;
      getInnerList();
    };
    // 这个就是页码发生变化  val就是当前页码
    const handleCurrentChange = (val:number) => {
      queryData.page = val;
      getInnerList();
    };
</script>

<style scoped lang="scss">
* {
  margin: 0;
  box-sizing: border-box;
}
// .bgc {
//   background: #f5f5f5;
//   padding-top: 80px;
//   padding-bottom: 20px;
// }
::v-deep .sys-cantaner .el-container .el-aside {
  display: none !important;
  background: #000;
}
::v-deep .el-container {
  display: none;
}
.conten {
  width: 1200px;
  background: #ffffff;
  border-radius: 6px;
  padding: 30px 30px 30px 30px;
  margin: auto;
  .title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    margin-bottom: 24px;
  }
  // 创建电站按钮
  .el-button--primary {
    background-color: #305add;
    border: none;
  }
  // 分页
  .block {
    // display: flex;
    display: -webkit-box;
    justify-content: end;
  }
}
</style>
<style>
.el-tooltip__popper {
  max-width: 40%;
}
</style>
